highQuery - פריימוורק עיצובי חזק ומהיר ! מעכשיו לעצב את כל האתר במינימום קוד ! (ללא ידע מוקדם בשפות צד שרת \ JS)
ובמדריך הנ"ל : נעשה הכרה ראשונית עם המערכת + דוגמא קטנה .
אהלן .
אתם בטח שואלים את עצמכם מהו הפריימוורק highQuery שאני כותב עליו .
לפני שאני אתחיל בהקדמה , אני רק רוצה להביא דוגמא קטנה שתופיע אולי בסדרת המדריכים החדשה שאני כותב על הפריימוורק הזה .
בעזרת קוד HTML יחסית פשוט :
<div height="60" data-roll="thumbnail">
<img src="./images/image_one.png">
</div>
<div height="120" data-roll="thumbnail">
<img src="./images/image_two.jpg">
</div>
<img src="./images/image_one.png">
</div>
<div height="120" data-roll="thumbnail">
<img src="./images/image_two.jpg">
</div>
אני יוצר את גלרייה המגניבה הבאה :
מגניב... לא ?! :)
ועכשיו להקדמה :
הפריימוורק הזה עובד עם : Internet Explorer (Windows8), Opera, Chrome, Firefox, Safari ועוד ! (כולל מובייל)
הוא נחשב כ"קוד פתוח" ולכן אתם יכולים לשנות אותו ולהוסיף פ'יצרים בעצמכם ! לא נידרש שם רישיון ושום תשלום כדי לעבוד איתו . רק להוריד ולהתחיל בעבודה :)
הפריימוורק הזה מבוסס על JQuery , HTML5 ו Css3 .
( jQuery ו jQuery Ui נדרשים כדי לעבוד איתו - כלול בהורדה)
הפריימוורק הזה מציע גם כמה פ'יצרים מגניבים במיוחד כמו :
*האם המשתמש גולש ממכשיר טאצ'
*האם יש פלאש מותקן על פלטפורמת הגולש ואם כן , מהי גירסתו .
*מהו הפלטפורמה שעליו גולש הגולש (מחשב , אייפון וכו)
*מהו הדפדפן שלו.
*מזהה iDevice.
*מזהה את המערכת הפעלה של הגולש.
ועוד !
ניתן ליצור אתר מעוצב ברמה גבוהה ללא הרבה קוד , והרבה פחות CSS פרונטלי (שהגולש כתב) .
מעכשיו , עבודה עם טפסים מעוצבים , תפריטים , טבלאות וטאבים נהית הרבה יותר קלה !
אז ... איך משיגים את התענוג הזה ?!
מורידים את הקבצים (6 במספר) לתיקייה שלכם , ומוסיפים את הקוד הנ"ל בתוך תגי הhead :
<script src="javascript/jQuery.js" type="text/javascript"></script>
<script src="javascript/ui.js" type="text/javascript"></script>
<script src="javascript/core.js" type="text/javascript"></script>
<link rel="STYLESHEET" type="text/css" href="css/jui.css">
<link rel="STYLESHEET" type="text/css" href="css/ui.css">
<script src="javascript/ui.js" type="text/javascript"></script>
<script src="javascript/core.js" type="text/javascript"></script>
<link rel="STYLESHEET" type="text/css" href="css/jui.css">
<link rel="STYLESHEET" type="text/css" href="css/ui.css">
בקרוב יהיו עוד מדריכים על איך בתכל'ס עובדים עם HighQuery ...
האתר הרישמי (לפחות בינתיים) - כל הפריימוורק בכלל חדש ... :)
בהצלחה !
תגובות לכתבה:
תודה על השיתוף,
אך עדיין יש שם לא מעט לשפר, אני ממליץ על
http://twitter.github.com/bootstrap
ממש ממש מגניב תודה!
@raslin
bootstrap ממש אחלה גם. אני חושב שגם מגיע לו מדריך באתר . (לפי מיטב דעתי האתר הזה משתמש גם בbootstrap) .
יש עוד הרבה לשפר , הפריימוורק הזה יחסית חדש ולכן מצפים שהוא יתעדכן וישתפר עם אפשרות לבחירת עיצוב כללי , לדוגמא ערכת צבעים של רק כחול , ואם אתה משתמש בה , כל הגוונים של האלמנטים הופכים לכחולים כאלו ואחרים (ולכל הצבעים גם )...
@dan_barzilay
תודה רבה :)
תודה על השיתוף.
מעדיף בכל זאת להמשיך להשתמש בפריימוורקים מוכרים ומתקדמים יותר.
אבל לhighQuery יש עתיד, מקווה שיגיע לגדולות..
אחלה FRAMEWORK
אבל הוא עובד על כל גרסאות הEXPLORER?